<template>
  <div >
  	
  		<div v-loading="loading" :class="'po-l-hidden ' + (opened ? 'open' : '')">
  			<a v-if="opened" @click="close" class="close grey">
  				<i class="iconfont icon-right"></i>
  			</a>
  			<a v-if="!opened" @click="open" class="close grey">
  				<i class="iconfont icon-left"></i>
  			</a>
  			<listTable
				ref="listTable"
				v-if="listOption" 
				:options="listOption"
				@command="listCommand"
				@listLoaded="listLoaded"
				></listTable>
  		</div>
  		
  		
  		<deployConfigDialog
				ref="deployConfigDialog"
				@close="saveDeployConfig"
				></deployConfigDialog>
      
  </div>
</template>


<script>
	import deployConfigDialog from "./deployConfigDialog";
//	import appdialog from "@/view/components/dialog/dialog";
	import listTable from "@/view/components/table/listTable";
	import {appStatusFilter} from "@/filters/status";
	import { listenner } from "@/utils/statuslistener";
	import {getInstHistoryTemplate,updateOrchestrateInstItem,againOrchestrate} from "@/service/swagger/OrchestrateController";
	import { getInstStatus } from '@/service/swagger/AcAppInstController';
	import { checkStatus } from '@/utils/common.js'
	import {deleteSL} from "@/service/swagger/InstanceController";

  export default {
    components:{
      // appdialog,
      listTable,
      deployConfigDialog,
    },
    data(){
      return{
      	params : {},
      	loading : false ,
      	opened : false,
      	datas : null,
      	listOption : {
      		//listBtnsAlign : "left" ,
      		listBtns : [{
						label : "修改发布内容",
						//iconfont : "icon-folder-add",
						commandName : "eidtDeploy",
						
					},{
						label : "重新部署",
						//iconfont : "icon-folder-add",
						commandName : "deployAggin",
						show : ()=>{
							// 挂起 、 未部署不能进行修改发布
							// 0: 待部署  1：部署中  2：部分成功  3：成功  4：失败  5：放弃部署
							return this.datas &&( [0,1,5].indexOf(this.datas.status)==-1)
						}
					},],
					header : [{
						label : "发布IP地址" ,
						propName : "ip",
						align:"left",
						width:"120px",
					},
					{
						label : "运行状态" ,
						html : (row)=>{
							return appStatusFilter(row.status)
						},
						width:"120px",
						//propName : "status",
					},
					{
						label : "操作" ,
						width : "",
						btns : [{
							label : "详情",
							commandName : "goDetail",
						}],
						btnGroups : [{
							label: "删除",
							commandName: "delete",
							show: (row) => {
								console.log("状态",row.status)
								return row.status == 3 || row.status == 4;//实际状态是已销毁 / 异常
							}
						}]
					}]
      	}
      }
    },
    mounted() {
      
    },
    methods:{
    	listCommand(command, row, index) {
				// console.log("列表进行了操作：", command,row,index );
				if (command && this[command]) {
					this[command](row, index);
				}
			},
			refresh(){
				this.initData();
			},
      initData(params){
      	if(params){
      		this.params = params;
      	}
      	this.loading = true ;
    		getInstHistoryTemplate({
    			...this.params,
    		}).then(ret=>{
    			this.loading = false;
    			if(!ret.code){
    				this.datas = ret.data;
    				this.$refs.listTable.serviceCallBack({data: this.datas.insts},true);
    			}
    		})
      },
      open(){
      	this.opened = true ;
        //this.$refs.dialog.open();
        return this ;
      },
      close(){
      	this.opened = false ;
        //this.$refs.dialog.open();
        return this ;
      },
      goDetail(row,index){
      	if(this.datas.templateType==2){
      		this.$router.push({
	      		path :  "/sl/zjdetail", 
	      		query : {
	      			appType : "zujian",
	      			id : row.instId,
	      		}
	      	})
      	}else{
      		this.$router.push({
	      		path :  "/sl/yydetail", 
	      		query : {
	      			appType : "yingyong",
	      			id : row.instId,
	      			deploy : row.deployType,
	      		}
	      	})
      	}
      	
      },
      
      eidtDeploy(){
      	// console.log(666,this.datas)
      	if(!this.datas){
      		this.pleaseChoseTemp();
      		return;
      	}
      	let config = this.datas.deployService || {} ;
      	let disabledIps = [];
      	for(let i in this.datas.insts){
      		let s = this.datas.insts[i].status ;
      		if([0,1,6,7,8,9,10].indexOf(s)>-1){
      			disabledIps.push(this.datas.insts[i].ip)
      		}
      	}
      	
      	this.$refs.deployConfigDialog.open().initData({
      		deployType : this.datas.deployType ,
      		templateType : this.datas.templateType ,
      		itemInstId : this.datas.itemInstId ,
      		templateId : config.templateId,
      		appName : config.appName || "" ,
      		clusterId : config.clusterId,
	      	clusterName : config.clusterName || "" ,
	      	// needips : config.clusterName ,
	      	ips : config.ips || [] ,
	      	disabledIps : disabledIps ,
	      	// ipsString : "", // 用于验证
	      	varsInfoShili : [{
	      		varsName : "",
	      		varsValue : config.spec || ""
	      	}],
	      	varsInfoPort : (config.portMappings ? config.portMappings.map(el=>{
	      		return {
	      			defaultValue : el.vmPort || "",
	      			varsName : el.dockerPort|| "",
	      			envType :2,
	      		}
	      	}) : null) ,
	      	varsInfoEnv : (config.envs ? config.envs.map(el=>{
	      		return {
	      			varsName : el.name|| "",
	      			defaultValue : el.value|| "",
	      			envType :1,
	      		}
	      	}) : null),
	      	varsInfoVolume : (config.volumes ? config.volumes.map(el=>{
	      		return {
	      			defaultValue : el.dockerPath|| "",
	      			envType :4,
	      		}
	      	}) : null),
	      	varsInfoLog : (config.logVolumes ? config.logVolumes.map(el=>{
	      		return {
	      			varsValue : el.logPath|| "",
	      			envType :5,
	      		}
	      	}):null),
	      	// varsInfo : [],
	      	templateConfigs : (config.instConfigs ? config.instConfigs.map(el=>{
	      		return {
	      			configName : el.configName|| "",
	      			configParentPath : el.configParentPath|| "",
	      			configSourceFile : el.configSourceFile|| "",
	      			varsValue : el.instId|| "",
	      			usedMethod : el.usedMethod|| "",
	      		}
	      	}) : null),
      	}, null , true , true )
      	
      	
      },
      saveDeployConfig(name,data,validated){
      	console.log("表单验证",name,data,validated)
      	if(validated){
      		// 表单验证成功
      		updateOrchestrateInstItem({
      			itemInstId : this.datas.itemInstId,
      			deployService : {
      				appName : data.appName  ,
							clusterName : data.clusterName  ,
							deployInstCounts : data.deployInstCounts  ,
							deployModel : data.deployModel  ,
							spec : data.varsInfoShili[0].varsValue || ""  ,
							envs : data.varsInfoEnv.map(el=>{
								return {
									name : el.varsName ,
									value : el.varsValue ,
								}
							}),
							instConfigs : data.templateConfigs.map(el=>{
								return {
									configName : el.configName ,
									configParentPath : el.configParentPath,
									configSourceFile : el.configSourceFile,
									// instId : el.varsValue ,
									usedMethod : el.usedMethod ,
								}
							})  ,
							ips : data.ips  ,
							logVolumes :  data.varsInfoLog.map(el=>{
								return {
									logPath : el.varsValue ,
								}
							}) ,
							portMappings :  data.varsInfoPort.map(el=>{
								return {
									dockerPort : el.varsName ,
									vmPort : el.varsValue ,
								}
							})    ,
							templateId : data.templateId  ,
							volumes : data.varsInfoVolume.map(el=>{
								return {
									dockerPath : el.varsValue ,
								}
							}) ,
      			}
      		}).then(ret=>{
      			if(!ret.code){
      				this.refresh();
      				// this.$emit("refresh");
      			}
      		});
      		
      	}
      },
      deployAggin(){
      	// console.log(this.datas)
      	if(!this.datas){
      		this.pleaseChoseTemp();
      		return;
      	}
      	againOrchestrate({
      		serviceInstId : this.datas.serviceInstId,
      		serviceTemplateId : this.params.serviceTemplateId,
      		templateId : this.datas.templateId,
      	}).then(ret=>{
      		if(!ret.code){
      			this.$emit("refresh");
      		}
      	})
      },
      pleaseChoseTemp(){
      	this.$message({message: '请选择可用的模板',type: 'error',duration : 2000,});
      },
      
			delete(row){
				this.$confirm("确定删除该实例？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					deleteSL(row.instId).then(ret => {
						if (ret && ret.code == 0) {
							this.refresh()
							this.$message({ showClose: true, message: '删除成功！', type: 'success' })
						}
					})
				})
			},
			
			listLoaded(tableData) {
				let _this = this
				checkStatus(tableData, _this, appStatusFilter, getInstStatus);
			},
			
    }
  }
</script>


<style lang="scss" >
	@import "../../../../styles/variables.scss";
	
	.po-l-hidden {
		top: 10px;
		position: absolute;
		right: -324px;
		width: 600px;
		bottom: 10px;
		background: #fff;
		border-radius: 5px;
		transition: .5s;
		box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
		z-index:9;
		&.open {
			right: 20px;
		}
		.close {
			cursor: pointer;
			display: block;
			width: 20px;
			height: 50px;
			background: #fff;
			position: absolute;
			left: -20px;
			top: 50%;
			transform: translate(0,-50%);
			border-radius: 5px 0 0 5px;
			box-shadow: -1px 0px 2px 0 rgba(0, 0, 0, 0.2);
			line-height: 50px;
			text-align: center;
			color: #eee;
			&:hover {
				text-decoration: none;
			}
		}
		
		.list-over-btns {
			text-align: left !important;
		}
	}
	
</style>